<template>
<!-- 旧结算日账单 -->
<div class="home-page-container">
  <el-page-header @back="goBack" content=""></el-page-header>
  <!-- search 查询 -->
  <el-card shadow="never">
    <mer-search :searchConfig="formConfig" :searchBar="searchBar" @search="search" @reset="reset(initQuery)" @changeTime="(value,model)=>handleChangeTime(value,model)" :loading="tableLoading" :isLayout="true">
      <template slot="handler">
        <el-button size="mini" @click="download" icon="el-icon-download">导出</el-button>
      </template>
    </mer-search>
  </el-card>
  <!-- summary 汇总信息 -->
  <el-card style="margin: 20px 0 10px" shadow="never">
    <div class="sum-wrapper">
      <div class="sum-item sum-item-1">
        <div class="value">{{sumInfo.oilAmount || 0}}</div>
        <div class="label">加油消费合计(元)</div>
      </div>
      <div class="sum-item sum-item-2">
        <div class="value">{{sumInfo.slottingFeeAmount || 0}}</div>
        <div class="label">通道费合计(元)</div>
      </div>
      <div class="sum-item sum-item-3">
        <div class="value">{{sumInfo.oilReturnAmount || 0}}</div>
        <div class="label">加油消费-退还合计(元)</div>
      </div>
      <div class="sum-item sum-item-4">
        <div class="value">{{sumInfo.slottingFeeReturnAmount || 0}}</div>
        <div class="label">通道费-退还合计(元)</div>
      </div>
    </div>
  </el-card>
  <!-- table 表格 -->
  <el-card shadow="never">
    <mer-table :loading="tableLoading" :tableConfig="tableConfig" :tableData="tableData" :pagination="pagination" @SizeChange="handleSizeChange" @PageChange="pageChange" :hasIndex="true">
      <template slot="handler" slot-scope="{row}">
        <el-button-group>
          <el-button size="mini" @click="showDetail(row)">查看明细</el-button>
        </el-button-group>
      </template>
    </mer-table>
  </el-card>
</div>
</template>

<script>
import listPage from '@/mixins/listPage'
import queryMix from '@/views/finance/mixins/query';
import { getOldBillQueryApi, getOldDailyBillSummaryApi, getOldDailyBillListApi, downloadOldDailyBillApi} from '@/api/finance'

// 查询表单配置
let formConfig = [
  { label: '账单号', type: 'input', modelName: 'billNumber', placeholder: '', maxlength: 100 },
  { label: '账单类型', type: 'select', modelName: 'billType', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'label', selectValue: 'value'},
  { label: '账单状态', type: 'select', modelName: 'billStatus', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'label', selectValue: 'value'},
  { label: '账单科目', type: 'select', modelName: 'billSubject', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'label', selectValue: 'value'},
  { label: '账单生成时间', labelWidth:'110px', type: 'date', modelName: 'createTime', model: '', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss', clearable: false, pickerOptions:{} }
]
// 表格参数配置
let tableConfig = [
  { label: '账单号', prop: 'billNumber', fixed: 'left', width: 150 },
  { label: '账单类型', prop: 'billTypeName', width: 150 },
  { label: '账单科目', prop: 'billSubjectName', width: 150 },
  { label: '金额(元)', prop: 'billAmount', width: 136 },
  { label: '账单状态', prop: 'billStatusName', width: 136 },
  { label: '结算周期开始时间', prop: 'billCycleStart', width: 136 },
  { label: '结算周期结束时间', prop: 'billCycleEnd', width: 136 },
  { label: '账单生成时间', prop: 'billCreateTime', width: 136 },
]
export default {
  mixins: [listPage, queryMix],
  data() {
    return {
      createTime: '',
      formConfig: formConfig,
      tableConfig: tableConfig,
      sumInfo: {
        oilAmount: '0.00',
        slottingFeeAmount: '0.00',
        oilReturnAmount: '0.00',
        slottingFeeReturnAmount: '0.00',
      },
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = ''
          }
        },
        // 限制时间选择范围31天
        disabledDate: (time) => {
          if (this.selectDate !== '') {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }
    }
  },
  created() {
    this.initPage()
  },
  methods: {
    //返回上一页，
    goBack() {
      this.$router.push({path:'/bill/dailyBill'})
    },
    initPage() {
      this.initQuery()
      this.getQueryProps()
      this.initList(getOldDailyBillListApi, true, getOldDailyBillSummaryApi)
    },
    // 设置默认查询条件，默认时间间隔7天
    initQuery() {
      this.createTime = ''
      this.initTime('createTime', 6, 'searchBar',true, 'billCreateStart', 'billCreateEnd')
      const { createTime, pickerOptions } = this
      const initObj = { createTime: [createTime, pickerOptions] }
      this.setSearchConfig(initObj)
    },
    // 获取查询条件：交易类型
    async getQueryProps() {
      try {
        const { code, result = {} } = await getOldBillQueryApi()
        if (code !== 200) return
        const { billTypes, billStatus, billSubjects} = result
        const initObj = { 
          billType: this.optionsWrapper(billTypes),
          billStatus: this.optionsWrapper(billStatus),
          billSubject: this.optionsWrapper(billSubjects)
        }
        this.setSearchConfig(initObj)
      } catch (err) {
        console.log(err)
      }
    },
    //导出
    download() {
      this.downloadFile(downloadOldDailyBillApi, '结算日账单')
    },
    showDetail(row) {
      console.log(row)
    },
    handleChangeTime(value, modelName) {
      if (modelName === 'createTime') {
        this.changeTime(value, 'searchBar', 'billCreateStart', 'billCreateEnd')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home-page-container {
  margin-top: 20px;
}

.sum-wrapper {
  display: flex;
  flex-flow: nowrap;
  color: #222;

  .sum-item {
    margin-right: 106px;
    padding-left: 10px;

    .value {
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .label {
      font-size: 14px;
    }
  }

  .sum-item-1 {
    border-left: 3px solid #C93A02;
  }

  .sum-item-2 {
    border-left: 3px solid #E7B911;
  }

  .sum-item-3 {
    border-left: 3px solid #027CC9;
  }

  .sum-item-4 {
    border-left: 3px solid #9A02C9;
  }

  .sum-item-5 {
    border-left: 3px solid #A6C902;
  }

}
</style>
